La sideview permet d'afficher une sidebar à gauche du contenu sous ordinateur.
La sidebar est composée d'un header et d'un contenu personnalisable.
Elle est fournie avec des objets comme les o-navlink et o-slider
.js requis :
Vous pouvez ajouter la classe u-fixed-navbar sur un élément parent / le body pour que le menu latéral gauche passe en fixed en bas de l'écran sur les petits écrans
<div class="o-sideview">
<aside class="c-sideview__sidebar">
<div class="c-sideview__sidebar__header">Sideview Sidebar Header</div><span>Sideview Sidebar Content</span>
</aside>
<div class="c-sideview__content">Sideview Content</div>
</div>
<a class="o-navlink" href=""><i class="c-fonticon__icon-map"></i>
<div class="u-title--nav">Carte</div></a>
<a class="o-navlink active"><i class="c-fonticon__project-sondage"></i>
<div class="u-title--nav">Sondages</div></a>
Pensez à ajouter la classe u-fixed-navbar sur le body pour que le menu de navigation soit fixé en bas de l'écran maquette sur mobile
<div class="o-sideview">
<aside class="c-sideview__sidebar">
<div class="c-sideview__sidebar__header">Sideview Sidebar Header</div>
<nav class="o-adaptnavbar"><a class="o-navlink" href=""><i class="c-fonticon__icon-map"></i>
<div class="u-title--nav">Carte</div></a><a class="o-navlink active" href=""><i class="c-fonticon__project-sondage"></i>
<div class="u-title--nav">Sondage</div></a><a class="o-navlink" href=""><i class="c-fonticon__project-infos"></i>
<div class="u-title--nav">Infos</div></a></nav>
</aside>
<div class="c-sideview__content">Sideview Content</div>
</div>
<div class="o-sideview">
<nav class="o-adaptnavbar mini"><a class="o-navlink"><i class="c-fonticon__icon-map"></i></a><a class="o-navlink"> <i class="c-fonticon__icon-map"></i></a><a class="o-navlink active"><i class="c-fonticon__icon-map"></i></a></nav>
<aside class="c-sideview__sidebar">
<div class="c-sideview__sidebar__header">
<div class="u-title--small">Liste des sondages</div><a class="o-btn" href="#">Filtrer les sondages</a>
</div>
<div>
<div class="o-dropdown-toggle">
<div class="c-dropdown-toggle__header">
<div class="u-flex"><i class="c-fonticon__icon-chevron"></i>
<div class="u-column">
<div class="u-title--mini">2466 ST FLOUR 29-03-2017</div>
<div class="u-subtitle">3 sondages</div>
</div>
</div>
</div>
<div class="c-dropdown-toggle__content">
<div>
<div class="u-flex"><i class="c-fonticon__icon-panda"></i>
<div class="u-column">
<div class="u-title--mini">Sondage n°C001</div>
<div class="u-subtitle">Profondeur : 0.89`</div>
</div>
</div><i class="c-fonticon__icon-pin"></i>
</div>
<div>
<div class="u-flex"><i class="c-fonticon__icon-panda"></i>
<div class="u-column">
<div class="u-title--mini">Sondage n°C001</div>
<div class="u-subtitle">Profondeur : 0.89`</div>
</div>
</div><i class="c-fonticon__icon-pin disabled"></i>
</div>
<div>
<div class="u-flex"><i class="c-fonticon__icon-panda"></i>
<div class="u-column">
<div class="u-title--mini">Sondage n°C001</div>
<div class="u-subtitle">Profondeur : 0.89`</div>
</div>
</div><i class="c-fonticon__icon-pin"></i>
</div>
</div>
</div>
<div class="o-dropdown-toggle">
<div class="c-dropdown-toggle__header">
<div class="u-flex"><i class="c-fonticon__icon-chevron"></i>
<div class="u-column">
<div class="u-title--mini">2466 ST FLOUR 29-03-2017</div>
<div class="u-subtitle">1 sondage</div>
</div>
</div>
</div>
<div class="c-dropdown-toggle__content">
<div>
<div class="u-flex"><i class="c-fonticon__icon-panda"></i>
<div class="u-column">
<div class="u-title--mini">Sondage n°C001</div>
<div class="u-subtitle">Profondeur : 0.89`</div>
</div>
</div><i class="c-fonticon__icon-pin"></i>
</div>
</div>
</div>
</div>
</aside>
</div>
<div class="o-sideview">
<aside class="c-sideview__sidebar">
<div class="c-fonticon__icon-close"></div>
<div class="c-sideview__sidebar__header">
<div class="u-title--small">Filtrer les sondages</div>
</div>
<div class="u-separatorWrapper">
<div class="c-sideview__sidebar__content">
<div class="u-title--mini">Profondeur (en mètres)</div>
<div class="o-slider" min="0" max="2" start="0.5" end="1.5" step="0.5"></div>
</div>
<div class="c-sideview__sidebar__content">
<div class="u-title--mini">Type de sondage</div>
<div class="o-input__holder">
<div class="o-checkbox">
<input type="checkbox" id="checkbox--01" name="checkbox"/><span></span>
<label for="checkbox--01"> <i class="c-fonticon__icon-panda"> </i>label checkbox</label>
</div>
<div class="o-checkbox">
<input type="checkbox" id="checkbox--02" name="checkbox"/><span></span>
<label for="checkbox--02"> <i class="c-fonticon__icon-panda"> </i>label checkbox</label>
</div>
<div class="o-checkbox">
<input type="checkbox" id="checkbox--03" name="checkbox"/><span></span>
<label for="checkbox--03"> <i class="c-fonticon__icon-panda"> </i>label checkbox</label>
</div>
</div>
</div>
<div class="c-sideview__sidebar__content">
<div class="u-title--mini">Qd moyen</div>
<div class="u-text--small">Résistance de pointe moyenne en GPa</div>
<div class="o-slider" min="0" max="2" start="0.5" end="1.5" step="1"></div>
<div class="u-split--gutter">
<div class="o-input__holder">
<div class="c-label">
<label for="valmin">Valeur min :</label>
</div>
<input id="valmin" type="text"/>
</div>
<div class="o-input__holder">
<div class="c-label">
<label for="valmin">Valeur max :</label>
</div>
<input id="valmax" type="text"/>
</div>
</div>
</div>
</div>
</aside>
</div>
<div class="o-sideview">
<aside class="c-sideview__sidebar">
<div class="c-sideview__sidebar__header">
<div class="u-title--small">Mes modèles de remblai</div><a class="o-btn o-btn--big js-popin fileUploader" href="popins/addProbing.html"><i class="c-fonticon__icon-plus"> </i><span>Ajouter un nouveau modèle de remblai</span></a>
</div>
<div class="u-separatorWrapper">
<div class="o-input-search">
<input type="text" placeholder="Rechercher un modèle"/><i class="c-fonticon__icon-search"></i>
</div>
<div>
<div class="o-dropdown-toggle--module">
<div class="c-dropdown-toggle__header">
<div class="u-flex"><i class="c-fonticon__icon-chevron"></i>
<div class="u-title--mini">Remblai Lorem Ipsum</div>
</div>
</div>
<div class="c-dropdown-toggle__content">
<div class="u-column u-bubble">
<div class="u-text u-fullwidth">Remblai Lorem</div>
<div class="u-centerSpaceAround u-fullsize"><a class="u-flex u-text--small" href="#"><i class="c-fonticon__icon-check"></i><span>Appliquer</span></a>
<div class="o-iconlist"><i class="c-fonticon__icon-edit"></i><i class="c-fonticon__icon-trash"></i></div>
</div>
</div>
<div class="u-column u-bubble">
<div class="u-text u-fullwidth">Remblai Lorem</div>
<div class="u-centerSpaceAround u-fullsize"><a class="u-flex u-text--small" href="#"><i class="c-fonticon__icon-check"></i><span>Appliquer</span></a>
<div class="o-iconlist"><i class="c-fonticon__icon-edit"></i><i class="c-fonticon__icon-trash"></i></div>
</div>
</div>
</div>
</div>
</div>
<div class="o-dropdown-toggle--module">
<div class="c-dropdown-toggle__header">
<div class="u-flex"><i class="c-fonticon__icon-chevron"></i>
<div class="u-title--mini">Remblai Lorem Ipsum</div>
</div>
</div>
<div class="c-dropdown-toggle__content">
<div class="u-column u-bubble">
<div class="u-text u-fullwidth">Remblai Lorem</div>
<div class="u-centerSpaceAround u-fullsize"><a class="u-flex u-text--small" href="#"><i class="c-fonticon__icon-check"></i><span>Appliquer</span></a>
<div class="o-iconlist"><i class="c-fonticon__icon-edit"></i><i class="c-fonticon__icon-trash"></i></div>
</div>
</div>
<div class="u-column u-bubble">
<div class="u-text u-fullwidth">Remblai Lorem</div>
<div class="u-centerSpaceAround u-fullsize"><a class="u-flex u-text--small" href="#"><i class="c-fonticon__icon-check"></i><span>Appliquer</span></a>
<div class="o-iconlist"><i class="c-fonticon__icon-edit"></i><i class="c-fonticon__icon-trash"></i></div>
</div>
</div>
</div>
</div>
</div>
</aside>
</div>
<div class="o-sideview">
<div class="nav o-adaptnavbar mini"><a class="o-navlink"><i class="c-fonticon__icon-map"></i>
<div class="u-title--nav">Carte</div></a><a class="o-navlink"> <i class="c-fonticon__icon-map"></i>
<div class="u-title--nav">Carte</div></a><a class="o-navlink active"><i class="c-fonticon__icon-map"></i>
<div class="u-title--nav">Carte</div></a><a class="o-navlink"> <i class="c-fonticon__icon-map"></i>
<div class="u-title--nav">Carte</div></a><a class="o-navlink"><i class="c-fonticon__icon-map"></i></a><a class="o-navlink"> <i class="c-fonticon__icon-map"></i></a><a class="o-navlink"> <i class="c-fonticon__icon-map"></i></a><a class="o-navlink"> <i class="c-fonticon__icon-map"></i></a><a class="o-navlink"> <i class="c-fonticon__icon-map"></i></a><a class="o-navlink"> <i class="c-fonticon__icon-map"></i></a></div>
</div>
<div class="o-sideview">
<aside class="c-sideview__sidebar c-sideview__sidebar-compact">
<div class="c-sideview__sidebar__header"></div>
<div class="u-separatorWrapper">
<div class="o-dropdown-toggle--tree">
<div class="c-dropdown-toggle__header open">
<div class="u-flex"><i class="c-fonticon__icon-chevron"></i>
<div class="u-column">
<div class="u-title--mini">Panda® Riom</div>
<div class="u-subtitle">5 sondages<i class="c-fonticon__icon-exclamation"></i></div>
</div>
</div>
</div>
<div class="c-dropdown-toggle__content">
<div class="probing-item cursor-pointer active">
<div class="u-flex">
<div class="u-column">
<div class="u-title--mini">12</div>
<div class="u-flex"><i class="c-fonticon__icon-remblai"></i>
<div class="u-text">Remblais LA SAUVETAT - SIVOM - Espace vert </div>
<div class="o-iconlist"><a><i class="c-fonticon__icon-edit"></i></a><a class="js-popin"><i class="c-fonticon__icon-trash"></i></a></div>
</div>
</div>
</div>
<div class="u-subtitle">Profondeur : 1.46 m </div>
</div>
<div class="probing-item cursor-pointer">
<div class="u-flex">
<div class="u-column">
<div class="u-title--mini">12</div>
<div class="u-flex"><i class="c-fonticon__icon-panda"></i>
<div class="u-text u-grey-text">Ajouter un rembais</div>
<div class="o-iconlist"><a><i class="u-grey-text c-fonticon__icon-plus"></i></a></div>
</div>
</div>
</div>
<div class="u-subtitle">Profondeur : 1.46 m </div>
</div>
</div>
</div>
</div>
</aside>
</div>